<template>
	<view class="club">
		<SRV-topbar :title="pageTitle"  isLeft='true'></SRV-topbar>
		<view class="nav" v-if="false">
			<view class="item" @click="searchFun('cate')">
		        <image src="http://hdsq.aoorange.cn/attachment/xcx/icon/icon5.png" mode="aspectFill" ></image>
				<text>商家分类</text>
			</view>
		    <view class="item" @click="searchFun('other')">
		        <image src="http://hdsq.aoorange.cn/attachment/xcx/new_2022/search.png" mode="aspectFill" ></image>
		    	<text>高级搜索</text>
		    </view>
		</view>
		<div class="content">
			<div class="list" v-if="pageResult.list.length > 0">
				<div class="item" v-for="(item,index) in pageResult.list" :key="index" @click="jump('merchantShopInfo', 'id='+item.id)">
					<div class="left">
						<image :src="item.picture"></image>
					</div>
					<div class="right">
						<view class="right_con">
							<text class="oneline name">{{item.title}}</text>
						</view>
						<view class="right_con" style="font-size: 28rpx;color: #444444;">{{item.cate_name}}</view>
						<view class="right_con">
							<uni-rate disabled="true" :value="item.desc_credit" size="12"></uni-rate>
							<text class="rate">{{item.desc_credit}}</text>
							<text class="km">{{ item.distance }}KM</text>
						</view>
						<view class="right_con right_con_disc">{{item.desc}}</view>
					</div>
				</div>
			</div>
			<view v-if="pageResult.list.length == 0" class="nocontent">
				<image src="http://hdsq.aoorange.cn/attachment/xcx/icon/noItem.png" mode="widthFix"></image>
			</view>
		</div>
		<uni-popup ref="catePopup" type="left" :mask-click="false">
			<view class="brandPopup" @touchmove.prevent>
				<view class="searchTitle">
		            分类列表
		            <image @click="close" class="close" src="https://hdsq.aoorange.cn/attachment/xcx/icon/close1.png" mode="aspectFill"></image>
		        </view>
		        <scroll-view scroll-y="true" class="right" style="height: 75vh;">
		            <view class="brandItem">
		                <view class="brandChild">
		                    <view v-for="(item6,index6) in cateList" :key="index6" class="childItem" @click="checkFun('cate', item6.itemId)">
		                        <view class="option">{{item6.itemName}}</view>
		                    </view>
		                </view>
		            </view>
		        </scroll-view>
			</view>
		</uni-popup>
		<uni-popup ref="searchPopup" type="right" :mask-click="false">
			<view class="searchPopup">
				<view class="searchTitle">
		            高级搜索
		            <image @click="close" class="close" src="https://hdsq.aoorange.cn/attachment/xcx/icon/close1.png" mode="aspectFill"></image>
		        </view>
				<view class="searchParam">
					<view class="lable_left">关键词</view>
		            <view class="lable_right"><uniSearchBar radius="36" cancelButton="none" placeholder="商品名称" v-model="keywords" searchWidth="95%;padding:0" bgColor="#fff;border: 1rpx solid #333;"></uniSearchBar></view>
				</view>
		        <view class="searchParam">
		        	<view :class="'selItem ' + (pageParam.isRecommend ? 'active' : '')" @click="selParamFun('isRecommend')">推荐</view>
		            <view :class="'selItem ' + (pageParam.isHot ? 'active' : '')" @click="selParamFun('isHot')">热门</view>
		            <view :class="'selItem ' + (pageParam.isNew ? 'active' : '')" @click="selParamFun('isNew')">新品</view>
		        </view>
		        <view class="searchParam">
		            <view class="selRadio" @click="selParamFun('priceSort')"><i :class="'radio2 ' + (pageParam.priceSort ? 'check ' : '')"></i><span>价格优先</span></view>
		            <view class="selRadio" @click="selParamFun('salesSort')"><i :class="'radio2 ' + (pageParam.salesSort ? 'check ' : '')"></i><span>销量优先</span></view>
		        </view>
		        <view :style="'height:' + bottomHeight + 'rpx;'" class="searchBtn" @click="subSearch()">搜索</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var _self;
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
                pageTitle: '自营店铺',
                isReload: false,
				distanceList: [],
				cateList: [],
				pageParam: {
					appkey: uni.getStorageSync('appkey'),
					'access-token': uni.getStorageSync('access-token'),
					page: 0,
					pageSize: 10,
					keywords: '',
					cateId: 0,
					distanceId : 0,
					latitude: '',
					longitude:'',
				},
				pageResult: {
					list: [],
					isEmpty: false,
					isEnd: false,
				},
			}
		},
		methods: {
			getLocationAddress() {
				wx.getLocation({
					type: 'wgs84',
					success: (res) => {
                        console.info(res);
						_self.pageParam.latitude = res.latitude;
						_self.pageParam.longitude = res.longitude;
						uni.setStorageSync('latitude', res.latitude);
						uni.setStorageSync('longitude', res.longitude);
						uni.setStorageSync('is_local', true);
						_self.pageParam.page = 0;
						_self.pageResult.list = [];
						_self.getList();
					},
					fail: function() {
                        console.info("getLocation error");
						_self.pageParam.page = 0;
						_self.pageResult.list = [];
						_self.getList();
					},
				});
			},
			getCateList() {
				serve.request({
					url: '/merchant/merchant/search-list',
					data: {
						appkey: uni.getStorageSync('appkey'),
					},
					v: '/v2'
				}).then(res => {
					_self.distanceList = res.data.distanceList;
					_self.cateList = res.data.cateList;
				});
			},
			close() {
                _self.$refs.catePopup.close();
                _self.$refs.searchPopup.close();
            },
            searchFun(type) {
                if(type == 'brand') {
                    _self.$refs.brandPopup.open();
                }
                if(type == 'cate') {
                    _self.$refs.catePopup.open();
                }
                if(type == 'other') {
                    _self.isReload = true;
                    _self.$refs.searchPopup.open();
                }
                _self.$forceUpdate();
                return ;
            },
			getList() {
				_self.pageParam.page++;
				serve.request({
					url: '/merchant/merchant/index',
					data: _self.pageParam,
					v: '/v3'
				}).then(res => {
					if (res.data && res.data.length > 0) {
						_self.pageResult.list = _self.pageResult.list.concat(res.data);
					}
					_self.pageResult.isEmpty = _self.pageResult.list.length == 0;
					_self.pageResult.isEnd = res.data.length == 0;
				});
			},
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link);
			}
		},
		onLoad() {
			_self = this;
			_self.getCateList();
		},
		onShow() {
			if(_self.isReload) {
				return ;
			}
			if (uni.getStorageSync('access-token') != "") {
				_self.getLocationAddress();
			} else {
                _self.pageParam.latitude = uni.getStorageSync('latitude');
                _self.pageParam.longitude = uni.getStorageSync('longitude');
				_self.pageParam.page = 0;
				_self.pageResult.list = [];
				_self.getList();
			}
		},
		onPullDownRefresh() {
			_self.pageParam.page = 0;
			_self.pageResult.list = [];
			_self.getList();
		},
		onReachBottom() {
			if (_self.pageResult.isEnd || _self.pageResult.isEmpty) {
				return
			}
			_self.getList()
		}
	}
</script>

<style scoped lang="scss">
	.club {
        .nav {
        	box-sizing: border-box;
        	width: 100%;
        	display: flex;
        	justify-content: space-between;
        	padding: 40upx;
        	border-bottom: 8upx #b1b1b3 solid;
        	.item {
        		display: flex;
        		align-items: center;
        		font-size: 36upx;
        
        		image {
        			width: 42upx;
        			height: 42upx;
        			margin-right: 12upx;
        		}
        	}
        }
		.content {
			.list {
				.item {
					display: flex;
					box-sizing: border-box;
					align-items: flex-start;
					padding: 22rpx 32rpx;
					border-bottom: 1px solid #ebebeb;

					.left {
						margin-right: 15rpx;
						image {
							width: 220rpx;
							height: 180rpx;
						}
					}

					.right {
						flex: 1;
						.right_con {
							display: flex;
							align-items: center;
							position: relative;
							.name {
								// max-width: 300rpx;
								font-size: 36rpx;
							}
							.state {
								padding: 5rpx 8rpx;
								text-align: center;
								color: #FFFFFF;
								font-size: 20rpx;
								border-radius: 2rpx;
								margin-left: 10rpx;
							}
							.rate {
								color: #FFBC00;
								font-size: 20rpx;
								margin-left: 10rpx;
								margin-top: -9rpx;
							}

							.km {
								color: #999999;
								position: absolute;
								right: 0rpx;
								font-size: 20rpx;
							}

							.discounts {
								font-size: 20rpx;
								color: #EB5938;
								margin-left: 7rpx;
							}
						}
						.right_con_disc{
							    overflow: hidden;
							    word-break: break-all;
							    text-overflow: ellipsis;
							    display: -webkit-box;
							    -webkit-box-orient: vertical;
							    -webkit-line-clamp: 3;
							    font-size: 28rpx;
							    white-space: break-spaces;
							    // height: 116rpx;
						}

						.right_con:nth-child(2) {
							padding: 6rpx 0rpx;
						}
					}
				}
			}
		}
		.nocontent{
			width: 100%;
			padding-top: 338rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			image{
				width:220rpx;
				height:220rpx;
			}
			text{
				font-size:28rpx;
				color:rgba(204,204,204,1);
			     margin-top: 30rpx;
			}
		}
		.brandPopup {
			display: flex;
			min-height: 100vh;
			width: 100vw;
		    // margin-left: 20vw;
			background: rgba(#fff, 1);
			border-radius: 0upx;
			position: absolute;
			left: 0;
			top: 0;
			margin-top: 160upx;
			padding-top: 20upx;
			flex-direction: column;
			font-size: 30upx;
		}
		
		.brandItem {
		    padding: 20rpx;
		    border-bottom: 1rpx ridge #ccc;
		}
        .brandChild{
            display: flex;
            align-items: center;
            // justify-content: space-around;
            flex-wrap: wrap;
        }
        .childItem{
            margin: 0 20rpx 20rpx 0;
            text-align: center;
            border: 1rpx solid #FFFFFF;
            image {
                width: 150rpx;
                height: 150rpx;
            }
        }
        .option{
            border: 1rpx solid #ccc;
            padding: 10rpx;
            border-radius: 20rpx;
        }
		.searchPopup {
			display: flex;
			min-height: 100vh;
			width: 100vw;
			background: rgba(#fff, 1);
			border-radius: 0upx;
			position: absolute;
			left: 0;
			top: 0;
			margin-top: 160upx;
			padding-top: 20upx;
			flex-direction: column;
			font-size: 30upx;
		}
		
		.searchTitle {
			display: flex;
		    padding: 15rpx 0rpx;
		    justify-content: center;
		    align-items: center;
		    color: #000000;
		    font-size: 36rpx;
		    border-bottom: 1rpx solid #000000;
		    
			image {
				width: 40rpx;
		        height: 40rpx;
		        position: absolute;
		        right: 20rpx;
			}
		}
        .searchParam {
            display: flex;
            align-items: center;
            padding: 20rpx;
            border-bottom: 1rpx ridge #ccc;
        }
        .selItem {
            width: 30%;
            text-align: center;
            border: 1rpx solid #eaeaea;
            border-radius: 20rpx;
            margin-right: 8%;
            height: 60rpx;
            line-height: 60rpx;
            letter-spacing: 5rpx;
        }.selRadio{
            width: 50%;
            display: flex;
            align-items: center;
            padding: 0 20rpx;
        }      
        .radio2 {
        	display: block;
        	width: 48upx;
        	height: 48upx;
        	border: 1px solid rgba(57, 72, 107, 1);
        	border-radius: 50%;
        	box-sizing: border-box;
        	margin-right: 10upx;
        }                     
        .radio2.check {
        	border: none;
        	background: url(http://app.chinasrv.com/attachment/xcx/my/check.png);
        	background-size: 100% auto;
        }
        .searchBtn{
            width: 100vw;
            position: fixed;
            left: 0;
            bottom: 0;
            height: 100upx;
            background: #FFBF0A;
            color: #fff;
            font-size: 32upx;
            line-height: 100upx;
            text-align: center;
            border-radius: 0;
        
            &::after {
             border: none;
            }
        }
	}
</style>
